<template>
	<div class="store-item br-4 c-p pos-r" @click="productDetail" :class="itemClass">
		<img class="item-img" :src="item.mainImg" alt="" />
		<div class="mt12 o-1 f-18 lin-24 col-333 plr-10 item-subject">
			{{ item.subject || '' }}
		</div>
		<div class="mt-8 col-ff1 bold f-24 lin-24 pb-16 plr-10">
			{{ userInfo.currencySymbol }} {{ item.price || 0 }}
		</div>
		<!-- 收藏 -->
		<div v-if="showFavorite" class="pos-a item-favorite bg-fff br-2 flex a-c j-c" @click.stop="productFavorite">
			<span class="iconfont">&#xe603;</span>
		</div>
		<!-- qc图 -->
		<div class="flex a-c j-sb pb-16" v-if="item.qcImages && item.qcImages.length" @click.stop="viewPicture(item.qcImages)">
			<div class="flex a-c">
				<div class="flex a-c">
					<div v-for="(i,k) in item.qcImages" :key="k" class="qc-item" :class="{'qc-l':k != 0}" :style="{zIndex:`${item.qcImages.length - k}`}">
						<img class="qc-img" src="@/assets/images/public/sel_1688.png" alt="" />
					</div>
				</div>
				<div class="ml-8 col-333 f-14 lin-14">
					View QC Photos
				</div>
			</div>
			<div class="iconfont mr-8">&#xe601;</div>
		</div>
	</div>
</template>

<script>
	import { mapState } from "vuex";
	
	export default{
		data(){
			return{
				
			}
		},
		props:{
			item:{
				type:Object,
				default(){
					return{}
				}
			},
			//是否显示收藏功能
			showFavorite:{
				type:Boolean,
				default:false
			},
			//item的（图、宽）尺寸 class
			itemClass:{
				type:String,
				default:'size-favorite'
			}
		},
		computed: {
		  ...mapState({
		    userInfo: state => state.user.userInfo
		  })
		},
		methods:{
			//查看qc大图
			viewPicture(images){
				this.$emit('viewPicture',images)
			},
			//商品详情
			productDetail(){
				let url = `/goods/details?id=${this.item.spuNo}&channel=${this.item.channel}`;
				if(this.userInfo.inviteCode){
					url += `&inviteCode=${this.userInfo.inviteCode}`
				}
				this.$router.push(url);
			},
			//收藏
			productFavorite(){
				this.$emit('changeFavorite',this.item)
			}
		}
	}
</script>

<style scoped lang="less">
	.store-item{
		
		box-sizing: border-box;
		&:hover {
		  transform: translateY(-10px);
		  transition: .5s;
			box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
		}
		&:hover .item-favorite{
			visibility: initial;
			transition: all 0.6s ease;
		}
		&:hover .item-subject{
			color:#FF186B;
		}
		.item-favorite{
			visibility: hidden;
			width: 32px;
			height: 32px;
			top: 8px;
			right: 8px;
			box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
			
			.iconfont{
				font-size: 16px;
				line-height: 16px;
				color:#FF186B;
			}
		}
		.item-img{
			object-fit:cover;
		}
		.iconfont{
			color: #AEB0B9;
			font-size: 14px;
			line-height: 14px;
		}
		.qc-item{
			width: 32px;
			height: 32px;
			overflow: hidden;
			box-sizing: border-box;
			border: 1px solid #fff;
			border-radius: 50%;
			.qc-img{
				width: 100%;
				height: 100%;
			}
		}
		.qc-l{
			margin-left: -26px;
		}
	}
	.size-store{
		width: 310px;
		.item-img{
			width: 310px;
			height: 310px;
		}
	}
	.size-favorite{
		width: 268px;
		.item-img{
			width: 268px;
			height: 268px;
		}
	}
</style>